<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'change-trend'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      //   const that = this
      this.chart = this.$echarts.init(this.$el)
      var data1 = [5, 20, 36, 10, 10, 20]
      var data2 = [15, 18, 46, 20, 8, 23]
      // var data3 = [15, 30, 46, 20, 20, 30]
      var data_kind = ['节能减排', '新能源', '气候融资', '双碳', '自然灾害']
      var data_month = ['2023年', '2022年', '2021年', '2020年']
      // 调色盘
      const color = {
        text: 'white',
        categoryColor: ['#24CEF4', '#00A5C8', '#007C9E', '#005676', '#003251'], //类型颜色
        areaColor: '#31EBCE', //选中区域颜色
        // 时间轴
        timeline: {
          itemStyle: '#31EBCE',
          checkpointStyle: '#31EBCE',
          controlStyle: {
            color: '#00a6bd',
            borderColor: '#00a6bd'
          },
          labelcolor: '#00a6bd'
        }
      }
      var data_color = [
        '#0EFCFF',
        '#00DBFF',
        '#00B5FF',
        '#8287EE',
        '#B052B0',
        '#B61362',
        '#ffffff' //文字颜色
      ]
      var my_all = {
        data: [data1, data2],
        class: data_kind,
        time: data_month,
        color: data_color
      }
      this.chart.setOption({
        timeline: {
          axisType: 'category',
          autoPlay: true,
          playInterval: 5000,
          data: my_all.time,
          bottom: 10,
          lineStyle: {
            color: color.categoryColor[1]
          },
          label: {
            color: color.timeline.labelcolor
          },
          itemStyle: {
            color: color.timeline.itemStyle
          },
          checkpointStyle: {
            color: color.timeline.checkpointStyle,
            borderColor: color.timeline.checkpointStyle
          },
          controlStyle: {
            color: color.timeline.controlStyle.color,
            borderColor: color.timeline.controlStyle.borderColor
          },
          color: color.text
        },
        options: [
          {
            textStyle: {
              color: color.text
            },
            title: {
              text: '关键词',
              textStyle: {
                color: color.text
              },
              top: '2%',
              right: '2%'
            },
            tooltip: {},
            legend: {
              //              data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
              data: my_all.class,
              top: 20,
              left: 'center',
              textStyle: {
                color: color.text
              }
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              x: 'right',
              bottom: '2%',
              style: {
                color: color.text
              },
              feature: {
                mark: {
                  show: true
                },
                dataView: {
                  show: true,
                  readOnly: false
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true
                }
              }
            },
            calculable: true,
            grid: {
              left: '10%',
              right: '6%',
              top: '10%',
              bottom: '15%'
            },
            xAxis: [
              {
                type: 'category',
                axisLabel: {
                  interval: 0
                },
                color: color.text,
                data: my_all.class
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '次数'
              }
            ],
            //2020
            series: [
              {
                name: '节能减排',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[0] } },
                data: [20, 0, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2023年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C1232B"></span>{b} : {c} '
                }
              },
              {
                name: '新能源',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[1] } },
                data: [0, 28, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2023年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#B5C334"></span>{b} : {c} '
                }
              },
              {
                name: '气候融资',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[2] } },
                data: [0, 0, 5, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2023年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FCCE10"></span>{b} : {c} '
                }
              },
              {
                name: '双碳',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[3] } },
                data: [0, 0, 0, 10, 0, 0],
                tooltip: {
                  formatter:
                    '2023年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E87C25"></span>{b} : {c} '
                }
              },
              {
                name: '自然灾害',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[4] } },
                data: [0, 0, 0, 0, 11, 0],
                tooltip: {
                  formatter:
                    '2023年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#27727B"></span>{b} : {c} '
                }
              },
              {
                name: '2023年',
                type: 'pie',
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                radius: '28%',
                center: ['75%', '35%'],
                data: [
                  {
                    value: 27,
                    name: '节能减排',
                    itemStyle: { color: color.categoryColor[0] }
                  },
                  {
                    value: 38,
                    name: '新能源',
                    itemStyle: { color: color.categoryColor[1] }
                  },
                  {
                    value: 6,
                    name: '气候融资',
                    itemStyle: { color: color.categoryColor[2] }
                  },
                  {
                    value: 14,
                    name: '双碳',
                    itemStyle: { color: color.categoryColor[3] }
                  },
                  {
                    value: 15,
                    name: '自然灾害',
                    itemStyle: { color: color.categoryColor[4] }
                  }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: '#ffffff'
                  }
                }
              }
            ]
          },
          {
            //  var data2 = [15, 18, 46, 20, 8, 23];
            series: [
              {
                name: '节能减排',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[0] } },
                data: [23, 0, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2022年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C1232B"></span>{b} : {c} '
                }
              },
              {
                name: '新能源',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[1] } },
                data: [0, 26, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2022年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#B5C334"></span>{b} : {c} '
                }
              },
              {
                name: '气候融资',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[2] } },
                data: [0, 0, 15, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2022年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FCCE10"></span>{b} : {c} '
                }
              },
              {
                name: '双碳',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[3] } },
                data: [0, 0, 0, 38, 0, 0],
                tooltip: {
                  formatter:
                    '2022年  <br/><span style="dsplay:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E87C25"></span>{b} : {c} '
                }
              },
              {
                name: '自然灾害',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[4] } },
                data: [0, 0, 0, 0, 8, 0],
                tooltip: {
                  formatter:
                    '2022年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#27727B"></span>{b} : {c} '
                }
              },
              {
                name: '2022年',
                type: 'pie',
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                radius: '28%',
                center: ['75%', '35%'],
                //          data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                //          data: [5, 20, 36, 10, 10, 20]
                data: [
                  {
                    value: 21,
                    name: '节能减排',
                    itemStyle: { color: color.categoryColor[0] }
                  },
                  {
                    value: 23,
                    name: '新能源',
                    itemStyle: { color: color.categoryColor[1] }
                  },
                  {
                    value: 14,
                    name: '气候融资',
                    itemStyle: { color: color.categoryColor[2] }
                  },
                  {
                    value: 35,
                    name: '双碳',
                    itemStyle: { color: color.categoryColor[3] }
                  },
                  {
                    value: 7,
                    name: '自然灾害',
                    itemStyle: { color: color.categoryColor[4] }
                  }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          /**2021 */
          {
            //  var data2 = [15, 18, 46, 20, 8, 23];
            series: [
              {
                name: '节能减排',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[0] } },
                data: [14, 0, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2021年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C1232B"></span>{b} : {c} '
                }
              },
              {
                name: '新能源',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[1] } },
                data: [0, 23, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2021年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#B5C334"></span>{b} : {c} '
                }
              },
              {
                name: '气候融资',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[2] } },
                data: [0, 0, 6, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2021年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FCCE10"></span>{b} : {c} '
                }
              },
              {
                name: '双碳',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[3] } },
                data: [0, 0, 0, 23, 0, 0],
                tooltip: {
                  formatter:
                    '2021年  <br/><span style="dsplay:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E87C25"></span>{b} : {c} '
                }
              },
              {
                name: '自然灾害',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[4] } },
                data: [0, 0, 0, 0, 40, 0],
                tooltip: {
                  formatter:
                    '2021年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#27727B"></span>{b} : {c} '
                }
              },
              {
                name: '2021年',
                type: 'pie',
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                radius: '28%',
                center: ['75%', '35%'],
                //          data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                //          data: [5, 20, 36, 10, 10, 20]

                data: [
                  {
                    value: 13,
                    name: '节能减排',
                    itemStyle: { color: color.categoryColor[0] }
                  },
                  {
                    value: 22,
                    name: '新能源',
                    itemStyle: { color: color.categoryColor[1] }
                  },
                  {
                    value: 5,
                    name: '气候融资',
                    itemStyle: { color: color.categoryColor[2] }
                  },
                  {
                    value: 22,
                    name: '双碳',
                    itemStyle: { color: color.categoryColor[3] }
                  },
                  {
                    value: 38,
                    name: '自然灾害',
                    itemStyle: { color: color.categoryColor[4] }
                  }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          },
          /**2020 */
          {
            //  var data2 = [15, 18, 46, 20, 8, 23];
            series: [
              {
                name: '节能减排',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[0] } },
                data: [29, 0, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2020年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#C1232B"></span>{b} : {c} '
                }
              },
              {
                name: '新能源',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[1] } },
                data: [0, 20, 0, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2020年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#B5C334"></span>{b} : {c} '
                }
              },
              {
                name: '气候融资',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[2] } },
                data: [0, 0, 10, 0, 0, 0],
                tooltip: {
                  formatter:
                    '2020年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FCCE10"></span>{b} : {c} '
                }
              },
              {
                name: '双碳',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[3] } },
                data: [0, 0, 0, 43, 0, 0],
                tooltip: {
                  formatter:
                    '2020年  <br/><span style="dsplay:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#E87C25"></span>{b} : {c} '
                }
              },
              {
                name: '自然灾害',
                type: 'bar',
                barGap: '-100%',
                itemStyle: { normal: { color: color.categoryColor[4] } },
                data: [0, 0, 0, 0, 36, 0],
                tooltip: {
                  formatter:
                    '2020年  <br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#27727B"></span>{b} : {c} '
                }
              },
              {
                name: '2020年',
                type: 'pie',
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                radius: '28%',
                center: ['75%', '35%'],
                //          data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
                //          data: [5, 20, 36, 10, 10, 20]

                data: [
                  {
                    value: 21,
                    name: '节能减排',
                    itemStyle: { color: color.categoryColor[0] }
                  },
                  {
                    value: 14,
                    name: '新能源',
                    itemStyle: { color: color.categoryColor[1] }
                  },
                  {
                    value: 7,
                    name: '气候融资',
                    itemStyle: { color: color.categoryColor[2] }
                  },
                  {
                    value: 31,
                    name: '双碳',
                    itemStyle: { color: color.categoryColor[3] }
                  },
                  {
                    value: 27,
                    name: '自然灾害',
                    itemStyle: { color: color.categoryColor[4] }
                  }
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>
